<template>
    <div>
        <van-nav-bar id="reset" title="健康档案" left-arrow right-text="新增" @click-left="backHandle"
            @click-right="addHandle" fixed z-index="100" />


        <div class="pageCon fuPage">
            <div class="listBox">
                <template v-if="recordList.length != 0">
                    <div class="itemBox" v-for="(ele, eIndex) in recordList" :key="eIndex">
                        <div>上传时间：{{ ele.createTime }}

                            <span @click="delHandle(ele.imageId)">删除</span>

                        </div>
                        <div>
                            <img :src="item" alt="" @click="checkImg(ele.imgList, eIndex)"
                                v-for="(item, index) in ele.imgList" :key="index">
                        </div>
                    </div>
                </template>
                <div class="emptyBox" v-else>
                    <img src="../../assets/tip_content.png">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { getUserCases, deleteUserCases } from '../../network/user'
export default {
    name: 'HomeR',
    data() {
        return {
            recordList: [],
            userId: '',
            isSelf: true,
            isLoading: false
        }
    },
    mounted() {

    },
    methods: {
        getRecord() {
            console.log(this.userId);
            getUserCases({
                userId: this.userId,
                type: 0,
            }).then(res => {
                if (res.flag) {
                    this.isLoading = false
                    console.log(res);
                    res.data.forEach(item => {
                        if (item.imageContent.includes(',')) {
                            item.imageContent = item.imageContent.slice(0, -1)
                        }
                        item.imgList = item.imageContent.split(',')
                    })
                    this.recordList = res.data
                    this.recordList = this.recordList.sort(this.dateData('createTime', false))
                    console.log(this.recordList);
                }
            })
        },

        pullHandle() {

            this.isLoading = true
            this.getRecord()
        },

        delHandle(ids) {
            if (!this.isSelf) {
                this.$toast('仅本人可删除')
                return
            }
            this.$dialog.confirm({
                title: '提示',
                message: '是否删除该健康档案',
                cancelButtonText: '取消',
                confirmButtonText: '确认删除'
            })
                .then(() => {
                    deleteUserCases({
                        userId: localStorage.userId,
                        ids
                    }).then(res => {
                        if (res.flag) {
                            this.getRecord()
                            this.$toast('删除成功')
                        } else {
                            this.$toast('删除失败')
                        }
                    })
                })
                .catch(() => {

                });

        },


        checkImg(list, index) {

            console.log(list);
            var arr = []
            list.forEach(item => {
                arr.push(item)
            })
            console.log(arr);
            ImagePreview({
                images: arr, // 需要预览的图片 URL 数组
                showIndex: true, // 是否显示页码
                closeable: true, // 是否显示关闭图标	
                startPosition: index,
                showIndicators: true
            })
        },
        backHandle() {
            this.$router.back()
        },

        addHandle() {
            if (!this.isSelf) {
                this.$toast('仅本人可编辑')
                return
            }
            this.$router.push('/uploadRecords')
        },
        dateData(property, bol) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                if (bol) {
                    // 升序
                    return Date.parse(value1) - Date.parse(value2);
                } else {
                    // 降序
                    return Date.parse(value2) - Date.parse(value1)
                }
            }
        }
    },
    created() {

        if (this.$router.history.current.query.userId) {
            this.isSelf = false
        }

        this.userId = this.$router.history.current.query.userId || localStorage.userId

        this.getRecord()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.listBox {
    box-sizing: border-box;
    padding: 0 24px;
    width: 100%;
}

.itemBox {
    margin-top: 24px;
    box-sizing: border-box;
    padding: 24px;
    width: 100%;
    background: #fff;
    border-radius: 20px;
}

.itemBox>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 24px;
    margin-bottom: 24px;
    font-size: 28px;
    color: #333;
    border-bottom: 2px solid #f2f2f2;
}

.itemBox>div:first-child>span {
    color: #277dff;
}

.itemBox>div:last-child>img {
    margin: 0 12px 12px 0;
    width: 118px;
    height: 118px;
}

.pageCon {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #EEF1F7;
    overflow-y: scroll;
}


#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__right .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}

.emptyBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.emptyBox>img {
    margin-top: 400px;
    width: 374px;
    height: 314px;
}
</style>